<template>
	<div class="newsbox">
		<div class="newshed">
			<pbheader></pbheader>
		</div>
		<div class="newscontent">
			<div class="newstitle">{{newsinfos.journalism_title}}</div>
			<div class="small">
				<div>编辑:<i>{{newsinfos.journalism_author}}</i></div>
				<div>{{newsinfos.journalism_time}}</div>
				<div>浏览量:{{newsinfos.journalism_pageview }}</div>
				<div>{{newsinfos.journalism_type }}</div>
			</div>
			<div class="newscontentbox">
				<p>{{newsinfos.journalism_content}}</p>
				<span><img :src="'http://118.24.83.96:80/wojuAdmin/public/uploads/'+newsinfos.journalism_img+'.jpg'"/></span>
				<p>{{newsinfos.journalism_content}}</p>
				<p>{{newsinfos.journalism_content}}</p>
				<p>{{newsinfos.journalism_content}}</p>
			</div>
			<div class="dingbox">
				<div @click='ding' :style="style1"><i></i></div>
				<div @click='ding1' :style="style2"><i></i></div>
			</div>
		</div>
		<div class="hotinfo">
			<div class="topwar">热门资讯</div>
			<div class="hotnews" v-for="item in hotnews">
				<div class="newtype">{{item.journalism_type}}</div>
				<img :src="'http://118.24.83.96:80/wojuAdmin/public/uploads/'+item.journalism_img+'.jpg'" />
				<div class="hotright">
					<p>{{item.journalism_title}}</p>
					<p>{{item.journalism_content}}</p>
					<p>{{item.journalism_time}}</p>
				</div>
			</div>
		</div>
		<div class="hothouse">
			<div class="housetitles">
				<span>热门写字楼出租推荐</span>
				<span>更多>></span>
			</div>
			<div class="hothouselist">
				<ul>
					<li v-for="items in hothouse">
						<div>
							<img :src="'http://118.24.83.96:80/wojuAdmin/public/uploads/'+items.house_smallimg+'.jpg'"/>
							<p><span>{{items.house_unitprice}}</span>/元.㎡</p>
						</div>
						<span>{{items.house_title}}</span>
						<p>{{items.house_district}}</p>
					</li>
					
				</ul>
			</div>
		</div>
		<div class="newbottom">
			<div class="pre">
				<span>上一篇</span>
				<p>{{next}}</p>
			</div>
			<div class="next">
				<span>下一篇</span>
				<p>{{proe}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import pbheader from '@/components/particulars/public/pbheader'
	export default {
		data() {
			return {
				newsinfos:"",
				style1:"",
				style2:"",
				hotnews:"",
				hothouse:"",
				next:"",
				proe:""
			}

		},
		components: {
			pbheader
		},
		methods:{
			ding:function(){
				this.style1 = "background:#b5b5b5;";
				this.style2 = "background:#f3f4f6;";
			},
			ding1:function(){
				this.style2 = "background:#b5b5b5;";
				this.style1 = "background:#f3f4f6;";
			}
			
		},
		mounted:function(){
			var _this = this;
			var data = {
				newsid:this.$route.params.newsid
			}
			_this.axios.post(this.ajaxUrls+'/api/Details/selnews',_this.qs.stringify(data)).then(function(res){
				_this.newsinfos = res.data[0];
			}).catch(function(err){
				console.log(err)
			});
			_this.axios.get(this.ajaxUrls+'/api/Details/selhotnews').then(function(res){
				_this.hotnews = res.data;
				_this.next = _this.hotnews[0].journalism_title;
				_this.proe = _this.hotnews[0].journalism_title;
			}).catch(function(err){
				console.log(err)
			});
			_this.axios.get(this.ajaxUrls+'/api/Details/hothouse').then(function(res){
				_this.hothouse = res.data;
			}).catch(function(err){
				console.log(err)
			});
		}
	};
</script>

<style scoped="scoped">
	
	.newsbox {
		width: 7.5rem;
		height: auto;
		background: #F1F1F1;
	}
	
	.newshed {
		width: 7.5rem;
		height: 0.8rem;
		background: black;
	}
	
	.newscontent {
		width: 7.5rem;
		height: auto;
		padding: 0 0.2rem;
		box-sizing: border-box;
		background: white;
	}
	
	.newstitle {
		width: 100%;
		padding: 0.2rem 0;
		font-size: 0.4rem;
		color: #333333;
		box-sizing: border-box;
	}
	
	.small {
		width: 100%;
		height: 0.5rem;
		font-size: 0.12rem;
		color: #666666;
		display: flex;
		justify-content: space-between;
	}
	
	.small>div {
		height: 0.4rem;
		line-height: 0.4rem;
	}
	
	.newscontentbox {
		width: 100%;
		height: auto;
	}
	
	.newscontentbox>p {
		padding: 0.2rem 0rem;
		box-sizing: border-box;
		font-size: 0.3rem;
		color: #333333;
		text-indent: 25px;
		letter-spacing: 0.05rem;
		line-height: 0.4rem;
	}
	
	.newscontentbox>span>img {
		display: block;
		width: 100%;
	}
	
	.dingbox {
		width: 100%;
		height: 1rem;
		padding: 0.2rem 0rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
	}
	
	.dingbox>div:first-of-type {
		width: 2rem;
		height: 0.5rem;
		border-radius: 50px;
		background: #f3f4f6;
		text-align: center;
	}
	
	.dingbox>div:last-of-type {
		width: 2rem;
		height: 0.5rem;
		border-radius: 50px;
		background: #f3f4f6;
		text-align: center;
	}
	
	.dingbox>div>i {
		display: inline-block;
		width: .48rem;
		height: .48rem;
		background: url(../../../static/imgage/icons.png) no-repeat;
		background-size: 9rem 9rem;
		vertical-align: -.10666667rem;
		margin: 0 .06666667rem 0 0;
	}
	
	.dingbox>div:first-of-type>i {
		background-position: -3.42rem -7.8rem;
	}
	
	.dingbox>div:last-of-type>i {
		background-position: -4.3rem -7.78rem;
	}
	.hotinfo {
		width: 7.5rem;
		height: auto;
		padding: 0.2rem;
		box-sizing: border-box;
		background: white;
		margin-top: 0.2rem;
		border-bottom: 1px solid #F1F1F1;
	}
	
	.topwar {
		width: 100%;
		height: 0.8rem;
		font-size: 0.3rem;
		color: #333333;
		line-height: 0.8rem;
	}
	
	.hotnews {
		width: 100%;
		height: 1.6rem;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	
	.hotnews>img{
		width: 2.3rem;
		height: 1.3rem;
	}
	.hotright{
		width: 4.6rem;
		height: 1.6rem;
	}
	.hotright>p:first-of-type{
		font-size: 0.3rem;
		color: #000;
		height: 0.5rem;
		line-height: 0.5rem;
		overflow: hidden;
	}
	.hotright>p:nth-of-type(2){
		height: 0.65rem;
		font-size: 0.21rem;
		overflow: hidden;
		text-overflow:ellipsis;
		color: #666666;
	}
	.hotright>p:last-of-type{
		height: 0.4rem;
		text-align: right;
		font-size: 0.25rem;
		line-height: 0.4rem;
		color: #666666;
	}
	.newtype{
		position: absolute;
		width: 1.2rem;
		height: 0.4rem;
		background: rgba(0,0,0,0.5);
		color: white;
		font-size: 0.25rem;
		text-align: center;
		line-height: 0.4rem;
	}
	.hothouse{
		width: 7.5rem;
		height: auto;
		padding: 0.2rem;
		box-sizing: border-box;
		background: white;
	}
	.housetitles{
		width: 100%;
		height: 0.7rem;
		display: flex;
		justify-content: space-between;
	}
	.housetitles>span{
		display: inline-block;
		padding: 0.1rem 0.2rem;
		box-sizing: border-box;
	}
	.housetitles>span:first-of-type{
		font-size: 0.35rem;
		color: #333333;
	}
	.housetitles>span:last-of-type{
		font-size: 0.25rem;
		color: #666666;
	}
	.hothouselist{
		width: 100%;
		height: auto;
	}
	.hothouselist>ul{
		width: 100%;
		height: 8rem;
		list-style: none;
	}
	.hothouselist>ul>li{
		width: 3.4rem;
		height: 4rem;
		float: left;
		margin-right: 0.15rem;
	}
	.hothouselist>ul>li>div{
		width: 100%;
		position: relative;
	}
	.hothouselist>ul>li>div>p{
		width: 100%;
		height: 0.5rem;
		background: rgba(0,0,0,0.4);
		position: absolute;
		bottom: 0;
		text-align: right;
		color: white;
		font-size: 0.3rem;
		line-height: 0.5rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
		overflow: hidden;
	}
	.hothouselist>ul>li>div>p>span{
		display: inline;
		padding: 0 0.1rem;
		box-sizing: border-box;
		color: #FE9900;
		font-weight: bold;
		overflow: hidden;
		line-height: 0.5rem;
	}
	.hothouselist>ul>li>div>img{
		width: 100%;
	}
	.hothouselist>ul>li>span{
		width: 3.5rem;
		display: block;
		height: 0.6rem;
		font-size: 0.3rem;
		line-height: 0.6rem;
		font-weight: bold;
		color: #333333;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.hothouselist>ul>li>p{
		width: 100%;
		height: 0.5rem;
		font-size: 0.25rem;
		color: #666666;
	}
	.newbottom{
		width: 7.5rem;
		height: 1.5rem;
		padding:0.2rem 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.pre{
		width: 3.5rem;
		height: 1.2rem;
		background: white;
	}
	.pre>span{
		display: block;
		width: 100%;
		height: 0.6rem;
		line-height: 0.6rem;
		font-size: 0.3rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	.pre>p{
		width: 100%;
		height: 0.6rem;
		font-size: 0.25rem;
		color: #666666;
		padding: 0 0.2rem;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.next{
		width: 3.5rem;
		height: 1.2rem;
		background: white;
	}
	.next>span{
		display: block;
		width: 100%;
		height: 0.6rem;
		line-height: 0.6rem;
		font-size: 0.3rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	.next>p{
		width: 100%;
		height: 0.6rem;
		font-size: 0.25rem;
		color: #666666;
		padding: 0 0.2rem;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
</style>